<template>
  <h1>上架中</h1>
  <div style="width: 1200px;margin:0 auto;">
    <div class="item-wrapper" v-for="(value,index) in this.list"   >
      <div class="item">
        <div class="cover">
          <div class="media-wrapper">
            <div class="show-img"><el-image style="height: 265.99px; width:277.5px ;" :src="`http://localhost:8080/${value.cimg}`"/></div>
          </div>  
        </div>
        
        <div class="item-info">
          <div class="item-name">{{value.cname}}
            <span data-v-33efa880="" class="flag"></span>
          </div>

          <div style="margin-left: 10px; margin-top:-10px; ">
            <span class="item-ids" style="color: #87888E;">编号：</span>
            <div class="item-id"><span>#{{value.cid}}</span></div>
          </div>
          

          <div class="item-num">售卖价格：<span>{{value.price}}</span></div>
        </div>

        <el-button class="btn-x" type="primary" round @click="dialogVisible = true" >取消上架</el-button>


        <el-dialog center="true" v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
          <span>确定取消上架</span>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary"  @click="cancelsale(value.cname,value.cid)">确定</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      
    </div>
  </div>
</template>

<script>

import { ElMessage } from 'element-plus'

export default {
  name: 'Sale',
  
  id:1,
  data() {
    return {
      dialogVisible:false,
      username:{
        username:'',
        cname:'',
        cid:'',
      },
      list:[],
    };
  },

  mounted() {
    this.sale();
    
  },

  methods: {
    getToken() {

        this.username.username = sessionStorage.getItem('token');
        
    },
    //上架售卖方法
    sale(){
      this.getToken();
      this.$http.post("user/sale",this.username)
        .then((response)=>{
          this.list=response.data;
          // console.log(this.list);
      }) 
    },
    cancelsale(name,id){

      this.username.cname = name;
      console.log(this.username);
      this.username.cid = id;
      this.$http.post("user/cancelsale",this.username)
      .then((response)=>{
        if(response.meta.status === 200){
              ElMessage({
                  showClose: true,
                  message: '下架成功',
                  type: 'success',
              })
              this.dialogFormVisible = false;
              this.$router.push('/shop/') 
            }else{
                ElMessage({
                    showClose: true,
                    message: '下架失败',
                    type: 'success',
                })
            }
        this.list=response.data;
        // console.log(this.list);
      }) 
    }
  },
};
</script>

<style lang="css" scoped>
.item-wrapper{
    width: 25%;
    display: inline-block;
}

.item{
    margin: 15px;
    -webkit-box-shadow: 0 6px 14px rgb(1 0 95 / 10%);
    -moz-box-shadow: 0 6px 14px rgba(1,0,95,.1);
    box-shadow: 0 6px 14px rgb(1 0 95 / 10%);
    background: #f8fbff;
    position: relative;
    /* height: 380px; */
    width: 277.5px;
    /* background-color: darkgrey; */
}

.cover{
  width: 277.5px;
  height: 266px;
  background-color: aqua;
}
.item-name{
  margin-top: 20px;
  margin-left: 10px;
  font-size: 20px;
  line-height: 24px;
  height: 24px;
  overflow: hidden;
}

.item-ids{
  display: inline-block;
}
.item-id{
  color: #0066ed;
  display: inline-block;
  font-size: 14px;
  margin-top: 20px;
  margin-left: 5px;
}

.item-num{
  position: absolute;
  color: rgb(255, 153, 0);
  font-size: 16px;
  margin-top: -50px;
  margin-left: 150px;
}

.btn-x{
  margin: 10px;
  margin-top: 10px;
  margin-left: 12px;
  width: 250px;
  height: 40px;
}

</style>